
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import cityData from "./city.js";
import "react-virtualized/styles.css"; //导入样式
import { List } from "react-virtualized"; //导入list组件
import NavHeader from "../../components/NavHeader/index.jsx";
export default function SelectCity(props) {
  const navigate = useNavigate();
  const [cityList, setCityList] = useState([]);
  useEffect(() => {
    getCityList();
  }, []);
  function getCityList() {
    let time = setTimeout(() => {
      let data = cityData.provinces;
      let arr = data.reduce((per, res) => {
        return [...per, ...res.citys];
      }, []);
      console.log(arr);
      setCityList(arr);
      clearTimeout(time);
      time = null;
    }, 500);
  }
  function renderItem({
    key, // 唯一值
    index, // 索引号
    isScrolling, // 是否在滚动中
    isVisible, // 当前行在list中是否可见
    style, // 每行的样式对象
  }) {
    return (
      <div key={key} style={style}>
        <div
          style={{
            fontSize: "14px",
            padding: "0 10px",
            borderBottom: "1px solid #eee",
            lineHeight: "30px",
          }}
          onClick={() => {
            localStorage.setItem("hkzf_city", cityList[index].citysName);
          }}
        >
          {cityList[index].citysName}
        </div>
      </div>
    );
  }
  return (
    <div>
      <NavHeader title="城市选择" />
      <div className="list">
        <List
          width={window.screen.width}
          height={window.screen.height - 45}
          rowCount={cityList.length}
          rowHeight={30}
          rowRenderer={renderItem}
        />
      </div>
    </div>
  );
}
